<template>
<div class="forgetPasswordForm">
  <el-form ref="form" :model="form" label-width="120px" size="small">
    <el-form-item label="用户名或手机号">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="验证码">
      <div class="verCodeBox">
        <el-input v-model="form.verCode"></el-input>
        <span class="verCode" @click="getCode">{{ bool?txt:num }}</span>
      </div>

    </el-form-item>
    <el-form-item label="新密码">
      <el-input type="password" v-model="form.newPassword"></el-input>
    </el-form-item>
    <el-form-item label="确认密码">
      <el-input type="password" v-model="form.verifyPassword"></el-input>
    </el-form-item>
  </el-form>
  <div class="btnBox">
    <div class="btn" @click="updatePassword">确认</div>
  </div>
</div>
</template>

<script>
export default {
  name: "forgetPasswordForm",
  data(){
    return {
      bool:true,
      timer:null,
      num:60,
      txt:'获取验证码',
      form:{
        "newPassword": "",
        "username": "",
        "verCode": "",
        "verifyPassword": ""
      }
    }
  },
  methods:{
    getCode(){
      if(this.bool){
        this.bool = false
        this.$api.getMessageCode({username:this.form.username}).then(res=>{
          this.num = 60
          this.timer = setInterval(()=>{
            if(this.num>0){
              this.num--
            }else{
              this.bool = true
              clearInterval(this.timer)
            }
          },1000)
        }).catch(err=>{
          this.bool = true
        })
      }
    },
    updatePassword(){
      this.$api.updatePassword(this.form).then(res=>{
        setTimeout(()=>{
          this.$router.push({name:'successPage',query:{title:'重置成功',name:'login',nameTitle:'去登陆'}})
        },1000)
      })
    },
  },
}
</script>

<style scoped lang="less">
.forgetPasswordForm{
  width: 450px;
  margin: 60px auto 0;
}
.btnBox{
  width: 100%;
  display: flex;
  justify-content: center;
  .btn{
    width: 120px;
    height: 40px;
    margin-left: 40px;
    background: #0F47B8;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
}
.verCodeBox{
  position: relative;
  .verCode{
    position: absolute;
    right: 15px;
    font-size: 14px;
    color: #0F47B8;
    cursor: pointer;
  }
}
</style>